<template>
    <div v-loading="loading">
        <el-card>
            <template #header>
                <div class="card-header flex gap-1">
                    <el-icon color="#4F46E5" size="24">
                        <CreditCard />
                    </el-icon>
                    <span>交流讨论</span>
                </div>
            </template>
            <ul role="list" class="divide-y divide-gray-100">
                <topicItem v-for="list in dataList" :key="list.id" :title="list.title" :timestemp="list.timestamp"
                    :src="list.user.avatar" :username="list.user.name" :isRecommend="list.isRecommend" />
            </ul>
        </el-card>
        <el-card class="mt-6">
            <el-pagination background layout="prev, pager, next" :total="1000" 
                @current-change="handleCurrentChange" />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import topicItem from '../../components/front/topic/topicItem.vue'
import { ref } from 'vue';
import { http } from '../../axios';

const dataList = ref<Array<TTopic> | []>([]);
const loading = ref(false);
const handleAllData = async () => {
    loading.value = true;
    const { data, code } = await http.request<Array<TTopic>>({
        url: 'topic',
    });
    if (code == 200) {
        dataList.value = data;
        loading.value = false;
    }
}

handleAllData();


const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style>
.is-active {
    background-color: #4F46E5 !important;
}
</style>